<template>
  <div>
    <codemirror
      v-model="code"
      ref="mycodemirror"
      :autofocus="true"
      :extensions="extensions"
      :indent-with-tab="true"
      @change="handleChange"
      :tab-size="2"
    />
    <!-- 显示格式错误提示 -->
    <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
  </div>
</template>

<script name="CodemirrorYaml" setup>
import { Codemirror } from "vue-codemirror";
import { yaml } from "@codemirror/lang-yaml"; // 语法高亮扩展
import { ref } from "vue";
import yamlParser from "js-yaml"; // 引入js-yaml用于解析校验（核心！）

const emit = defineEmits(["update:modelValue", "handleError"]);
const code = ref(""); // 初始正确的YAML
const extensions = [yaml()]; // YAML语法高亮
const errorMsg = ref(""); // 错误提示
const jsonData = ref(""); //存放JSON格式的数据

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

// 监听父组件传入的 modelValue 变化，同步到子组件的 code
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== code.value) {
      errorMsg.value = "";
      code.value = newVal;
      // 从 JSON 数组生成多文档 YAML
      jsonData.value = yamlParser.loadAll(newVal);
    }
  },
  { immediate: true } // 初始化时同步一次
);

const handleChange = (e) => {
  code.value = e;
  emit("update:modelValue", code.value);
  // 实时校验YAML格式
  validateYaml(e);
};

// 校验YAML格式的方法
const validateYaml = (yamlStr) => {
  if (!yamlStr.trim()) {
    errorMsg.value = ""; // 空字符串不报错
    jsonData.value = "";
    return;
  }
  try {
    jsonData.value = "";
    // 关键：用js-yaml的load方法解析（不是parse！）
    // 多文档解析（支持---分隔的多个文档）
    jsonData.value = yamlParser.loadAll(yamlStr);
    errorMsg.value = ""; // 解析成功，清空错误
    emit("handleError", false);
  } catch (err) {
    // 解析失败，捕获错误信息（包含行号）
    errorMsg.value = `第 ${err.mark?.line + 1 || "未知"} 行错误: ${
      err.message
    }`;
    emit("handleError", true);
  }
};
</script>

<style lang="scss" scoped>
:deep(.cm-editor) {
  width: 100%;
  height: 400px;
  border: 1px solid #eee;
}
.error-msg {
  color: #ff4d4f;
  margin-top: 8px;
  font-size: 14px;
}
</style>
